<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS用户界面样式</title>
    <style>
      input,
      #ta1 {
        /* 取消表单轮廓 */
        outline: none;
      }

      #ta1 {
        /* 防止拖拽文本域 */
        resize: none;
      }
      /*  */
      .img1 {
        /* vertical-align: bottom; */
        /* vertical-align: top; */
        /* 让图片和文字垂直居中对齐 */
        vertical-align: middle;
      }
      /*  */
      #ta2 {
        vertical-align: middle;
      }
      /*  */
      .konbai {
        border: 2px solid rebeccapurple;
      }
      .img2 {
        /* vertical-align: middle; */
        display: block;
      }
      /* 单行文本溢出显示省略 */
      .shengluehao {
        width: 150px;
        height: 80px;
        background-color: pink;
        margin: 100px auto;
        /* 这个单词的意思是如果文字显示不开自动换行 */
        /* white-space: normal; */
        /* 1.这个单词的意思是如果文字显示不开也必须强制一行显示 */
        white-space: nowrap;
        /* 2.超出的部分隐藏 */
        overflow: hidden;
        /* 3.文字用省略号替代超出的部分*/
        text-overflow: ellipsis;
      }
      /* 多行文本溢出显示省略 */
      .duoshengluehao {
        width: 150px;
        height: 65px;
        background-color: pink;
        margin: 100px auto;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* 限制在一个块元素显示的文本的行数 */
        -webkit-line-clamp: 3;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <!-- 
        鼠标样式 cursor
        li {cursor: pointer}
        设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
        default  小白 默认
        pointer  小手
        move  移动
        text  文本
        not-allowed  禁止

        轮廓线 outline
        给表单添加 outline:0; 或者 outline:none; 样式之后，就可以去掉默认的蓝色边框
     
        防止拖拽文本域 resize
        textarea{resize: none;}

        解决图片底部默认空白缝隙问题
        bug:图片低侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
        主要解决方法有两种：
          1.给图片添加 vertical-align:middle | top | bottom等。(提倡使用)
          2.把图片转换为块级元素display: block;

        溢出的文字省略号表示
        1.单行文本溢出显示省略号--必须满足三个条件
           //1.先强制一行内显示文本
           white-space: nowrap; (默认 normal自动换行)
           //2.超出的部分隐藏
           overflow: hidden;
           //3.文字用省略号替代超出的部分
           text-overflow: ellipsis;
        2.多行文本溢出显示省略
        其有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webKit内核)
        //超出的部分隐藏
        overflow: hidden;
        //文字用省略号替代超出的部分
        text-overflow: ellipsis;
        //弹性伸缩盒子模型显示
        display: -webkit-box;
        //限制在一个块元素显示的文本的行数
        -webkit-line-clamp:2;
        //设置或检索伸缩盒对象的子元素的排列方式
        -webkit-box-orient:vertical;
    -->

    <ul>
      <li style="cursor: default">我是默认的小白鼠标样式</li>
      <li style="cursor: pointer">我是鼠标小手样式</li>
      <li style="cursor: move">我是鼠标移动样式</li>
      <li style="cursor: text">我是鼠标文本样式</li>
      <li style="cursor: not-allowed">我是鼠标禁止样式</li>
    </ul>

    <!-- 1.取消表单轮廓 -->
    <input type="text" />
    <!-- 2.防止拖拽文本域 -->
    <textarea name="" id="ta1" cols="30" rows="10"></textarea>

    <!-- vertical-align实现图片文字垂直居中对齐 -->
    <br />
    <br />
    <img
      src="../image/image1.00.webp"
      alt=""
      style="width: 100px; height: 80px"
      class="img1"
    />我爱你
    <br />
    <br />
    <textarea name="" id="ta2" cols="30" rows="10"></textarea>请你留言
    <br />
    <div class="konbai">
      <img
        src="../image/image1.01.webp"
        alt=""
        style="width: 100px; height: 80px"
        class="img2"
      />
    </div>

    <!--单行溢出的文字省略号表示 -->
    <div class="shengluehao">啥也不说了，此处省略一万字</div>
    <!-- 多行溢出的文字省略号表示 -->
    <div class="duoshengluehao">
      啥也不说了，此处省略一万字，此处省略一万字，此处省略一万字
    </div>
  </body>
</html>
